<!--  -->
<template>
  <div class="layout">
    <div class="investment-box">
      <div class="title">
        楼宇业主认证
        <span class="title-span"
          >上传楼宇证明，认证成为楼宇业主，发布楼宇信息</span
        >
      </div>
      <div v-if="settledStatus == 0">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="264px"
          class="demo-ruleForm"
        >
          <el-form-item label="楼宇名称：" prop="buildingName">
            <el-input
              v-model="ruleForm.buildingName"
              placeholder="请输入楼宇名称"
              maxlength="50"
            ></el-input>
          </el-form-item>
          <el-form-item label="楼宇类型：" prop="buildingType">
            <el-select v-model="ruleForm.buildingType" placeholder="请选择">
              <el-option
                v-for="item in typeList"
                :key="item.dictValue"
                :label="item.dictLabel"
                :value="item.dictValue"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细位置：" prop="address">
            <el-input
              v-model="ruleForm.address"
              maxlength="100"
              placeholder="请输入楼宇所在详细位置"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系人：" prop="contactsPerson">
            <el-input
              v-model="ruleForm.contactsPerson"
              maxlength="50"
              placeholder="请输入联系人姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系方式：" prop="contactsPhone">
            <el-input
              v-model="ruleForm.contactsPhone"
              placeholder="请输入联系方式"
              maxlength="13"
              @input="
                ruleForm.contactsPhone = ruleForm.contactsPhone.replace(
                  /[^\d-]/g,
                  ''
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="上传楼宇归属或代理权证明文件：" prop="files">
            <div style="text-align: left">
              <addUpload @changeUp="changeUp"></addUpload>
            </div>
          </el-form-item>
        </el-form>
        <div class="btn-bottom">
          <Buttons :buttons="buttons_send" @cancel="cancel" @send="submitForm('ruleForm')"></Buttons>
        </div>
      </div>

      <!-- 弹窗 -->
      <el-dialog
        title=""
        :visible.sync="dialogVisible"
        width="480px"
        :before-close="handleClose"
        :showClose="false"
        top="35vh"
      >
        <div class="dialong-conten">
          <i class="el-icon-success green font22"></i>
          <span>楼宇业主资料提交成功!</span>
        </div>
        <div class="dialong-span">
          请您耐心等待审核结果。审核结果将以短信的方式发送至您的手机。
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button
            size="small"
            class="blueness"
            type="primary"
            @click="determine"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!-- 楼宇业主资料提交成功! -->
      <div class="settled-box" v-if="settledStatus == 2">
        <div class="headline-title">
          <i class="el-icon-success green font22"></i>
          <span class="headline">您已通过楼宇业主认证，可发布楼宇信息。</span>
        </div>
        <Buttons :buttons="buttons_apply" @apply="$router.push({ name: 'releaseBuilding'})" class="btns"></Buttons>
      </div>
      <!-- 你的楼宇业主资料认证未通过! -->
      <div class="settled-box" v-if="settledStatus == 3">
        <div class="headline-title">
          <i class="el-icon-error font22" style="color: #cccccc"></i>
          <span class="headline">你的楼宇业主资料认证未通过!</span>
        </div>
        <div class="gray reminder">您可以重新上传材料申请。</div>
        <div style="margin-top: 54px">
          <Buttons :buttons="buttons_reApply" @back="$router.replace({ path: '/investment' })" class="" @reApply="reApply"></Buttons>
        </div>
      </div>
      <!-- 楼宇业主资料提交成功 -->
      <div class="settled-box" v-if="settledStatus == 1">
        <div class="headline-title">
          <i class="el-icon-circle-check green font22"></i>
          <span class="headline">你的楼宇业主资料已提交成功!</span>
        </div>
        <div class="gray reminder">
          请您耐心等待审核结果，审核结果将以短信的方式发送至您的手机。
        </div>
        <Buttons :buttons="buttons_back" @back="$router.replace({ path: '/investment' })" class="btns"></Buttons>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import addUpload from "./components/investmentUpload";
import { checkLogin, relogin } from "@/utils/util.js";
import settled from '@/formRules/investment/settled.js'
import { getOwnerAuthRegister, getOwnerAuthUserAuthInfo } from '@/common/api/investment'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    addUpload,
  },
  mixins: [settled],
  data() {
    //这里存放数据
    return {
      buttons_apply:[{text:"发布楼宇",type:"success",size:"l",method:"apply"}],
      buttons_reApply:[
        {text:"重新申请",type:"success",size:"l",method:"reApply"},
        {text:"返回",type:"success",size:"l",method:"back"}
      ],
      buttons_send:[
        {text:"取消",type:"normal",size:"l",method:"cancel"},
        {text:"提交",type:"success",size:"l",method:"send"}
      ],
      buttons_back:[{text:"返回",type:"success",size:"l",method:"back"}],
      settledStatus: 0,
      dialogVisible: false,
      typeList: [],
      // reApplyObj: {},
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    reApply() {
      this.settledStatus = 0;
      // this.ruleForm = this.reApplyObj;
    },

    //提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("确认提交?", "提示", {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            this.getRegister();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消提交",
            });
          });
        }
      });
    },

    // 入驻申请方法
    async getRegister() {
      let res = await getOwnerAuthRegister(this.ruleForm)
      console.log("res", res);
      if (res.code == 200) {
        this.dialogVisible = true;
        this.$message({
          type: "success",
          message: "提交成功!",
        });
      } else {
        this.$message.error(res.message);
      }
    },
    // 上专文件的回调方法
    changeUp(data) {
      // console.log("data", data);
      this.ruleForm.files = data;
    },
    // 确定按钮跳转到招商首页
    determine() {
      this.dialogVisible = false;
      this.$router.replace("/investment");
    },
    //关闭弹窗
    handleClose(done) {
      this.dialogVisible = false;
    },
    // 楼宇业主认证信息
    async getUserAuthInfo() {
      let {code, data, msg} = await getOwnerAuthUserAuthInfo()
      if (code != "200") return this.$message.warning(msg);
      this.settledStatus = data ? data.state : 0;
      // this.reApplyObj = res.data;
    },
    // 取消
    cancel() {
      this.$confirm("确认取消？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        this.$router.back();
        this.$refs["form"].resetFields();
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消操作",
        });
      });
    },
    // 字典查询
    async gettypeList() {
      let api = `building_type`;
      // 调用公共方法中的查询字典表
      this.getDictList(this,api).then(res => {
        this.typeList = res.building_type.map((e) => {
          e.dictValue = Number(e.dictValue);
          return e;
        });
      })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  async mounted() {
    // 判断有没有登录，没有登录跳转登录页
    if (checkLogin(this)) {
      await this.getUserAuthInfo();
      this.gettypeList();
    } else {
      this.$message.error("您需要登录才能访问当前页面，请先登录")
      relogin(this);
    }
  },
  async activated(){
    // 判断有没有登录，没有登录跳转登录页
    if (checkLogin(this)) {
      await this.getUserAuthInfo();
      this.gettypeList();
      this.$refs['foot'].init()
    } else {
      this.$message.error("您需要登录才能访问当前页面，请先登录")
      relogin(this);
    }
  }
};
</script>
<style scoped>
.investment-box ::v-deep .el-form-item__label {
  color: #666666;
  font-size: 16px;
}

.investment-box ::v-deep .el-input {
  font-size: 16px;
  width: 500px;
  border-radius: 20px;
  /* border-radius: 0 !important; */
}
/* .investment-box ::v-deep .el-input__inner {
  border-radius: 0 !important;
}
.investment-box ::v-deep .el-button {
  border-radius: 0 !important;
} */
</style>

<style lang='scss' scoped>
//@import url(); 引入公共css类
.investment-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-bottom: 50px;
  .btns{
    margin-top: 30px;
  }
  .btn-bottom {
    display: flex;
    justify-content: center;
    div:nth-child(1) {
      margin-right: 20px;
    }
    > div {
      cursor: pointer;
    }
  }
  .settled-box {
    height: 300px;
    padding-top: 50px;
    box-sizing: border-box;
  }
  .title {
    margin-top: 47px;
    padding-bottom: 18px;
    width: 820px;
    border-bottom: 1px dashed #cccccc;
    color: #045db9;
    font-size: 20px;
    text-align: left;
  }
  .title-span {
    font-size: 14px;
    color: #333333;
    font-weight: 700;
  }
  .demo-ruleForm {
    margin-top: 33px;
  }
}
.gray {
  color: #333333;
  text-align: left;
  margin-left: 33px;
}
.green {
  color: #85c862;
}
.blueness {
  width: 120px;
  height: 40px;
  background: #045db9 !important;
  cursor: pointer;
  border: none;
}
.reminder {
  font-size: 16px;
  margin-top: 14px;
  text-align:center;
}
.font22 {
  font-size: 22px;
}
.headline {
  padding-left: 10px;
  line-height: 22px;
  color: #333333;
}

.headline-title {
  color: #333333;
  font-size: 24px;
  display: flex;
  justify-content: center;
}

.dialong-conten {
  color: #333333;
  font-size: 16px;
  display: flex;
  padding-left: 27px;
  span {
    padding-left: 20px;
    line-height: 22px;
  }
}
.dialong-span {
  font-size: 12px;
  color: #666666;
  padding: 10px 0 0 60px;
}
</style>